<script>
export default {
  name: "MyDirective",
  data() {
    return {
      color: "blue",
      fontSize: "20px",
    }
  },
  methods: {
    updateStyle() {
      const colors = ['green', 'black', 'purple', 'red', 'orange']
      let idx = Math.floor(Math.random() * 5);
      this.color = colors[idx];
      this.fontSize = '50px';
    },
  }
}
</script>

<template>
  <div>
    <h3>我是自定义指令</h3>
    姓名：<input type="text" v-my-input> <br>
    <hr>
    <div v-change-style="{color:this.color,fontSize:this.fontSize}">hello,vue!</div>
    <button @click="updateStyle" style="margin-top: 20px">更新样式</button>
  </div>
</template>

